<template>
	<div class="app-container">
		<el-card class='card'>
			<div class='card—font'>
				<div class='total'>
					<div>总金额</div>
					<div>{{totalAmountInfo.totalAmount}}</div>
				</div>
				<div class='total'>
					<div>已缴费金额</div>
					<div>{{totalAmountInfo.inAmount}}</div>
				</div>
				<div class='total'>
					<div>未缴费金额</div>
					<div>{{totalAmountInfo.outAmount}}</div>
				</div>
				<div class='total'>
					<div>总单数</div>
					<div>{{totalAmountInfo.totalNum}}</div>
				</div>
				<div class='total'>
					<div>已缴费单数</div>
					<div>{{totalAmountInfo.inNum}}</div>
				</div>
				<div class='total'>
					<div>未缴费单数</div>
					<div>{{totalAmountInfo.outNum}}</div>
				</div>
			</div>
		</el-card>
         <div class="search  add-view" style="margin-bottom: 20px;">
         	<el-button size="medium" @click="addFn">添加</el-button>         	
         	<el-button type="success"
         		@click="downLoadFn('https://slj.wanmou.cn/upload/member/%E4%BB%95%E6%9E%97%E5%A4%9C%E5%B8%82%E8%A1%97%E5%95%86%E6%88%B7%E6%94%B6%E8%B4%B9%E8%B4%A6%E5%8D%95%E6%A8%A1%E6%9D%BF.xlsx')">下载导入数据模板</el-button>
         	<el-button type="primary" @click="importDataFn()">导入</el-button>
         	<el-button type="primary" class="left" @click="exportToExcel"> 导出</el-button>         	
         </div>
		<div class="left search">
			<el-select v-model="queryData.payment_status" clearable placeholder="请选择缴费状态" class="username left">
				<el-option v-for="item in paymentOptions" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
			<el-select v-model="queryData.fee_type" clearable placeholder="请选择费用类型" class="username left">
				<el-option v-for="item in feeOptions" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
			<el-input v-model="queryData.merchant_name" clearable placeholder="请输入姓名" class="username left" />
			<el-input v-model="queryData.shop_id" clearable placeholder="请输入商铺编号" class="username left" />
			<el-input v-model="queryData.merchant_id_card" clearable placeholder="请输入身份证号" class="username left" />
			<el-input v-model="queryData.order_no" clearable placeholder="请输入内部订单号" class="username left" />
			<el-input v-model="queryData.fd_order_no" clearable placeholder="请输入富滇订单号" class="username left" />
			<el-input v-model="queryData.billing_no" clearable placeholder="请输入账单编号" class="username left" />
			<el-date-picker class="username left" v-model="queryData.dates" type="month" format='yyyy-MM'
				value-format='yyyy-MM' placeholder="选择月">
			</el-date-picker>		
		</div>
		<div class="search  add-view">
			<el-date-picker
			       v-model="dateValue"
			       type="daterange"
			       range-separator="至" format='yyyy-MM-dd'  value-format='yyyy-MM-dd'
			       start-placeholder="开始日期" @change='chooseTimeFn'
			       end-placeholder="结束日期">
			     </el-date-picker>
			<el-button type="success" class="left" size="medium" @click="searchFn()">搜索</el-button>
			<el-button class="left" size="medium" @click="resetDataFn"> 重置</el-button>
			<el-button type="primary" class="left" @click="exportMoreData">批量导出凭证</el-button>
		</div>

		

		<div class="tableInfo">
			<el-table v-loading="listLoading" id="table" :data="tabList" ref="elTable" border style="width: 100%"
				highlight-current-row @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55" />
				<el-table-column label="ID" prop="id" align="left" width="50" />
				<el-table-column label="商铺编号" prop="shop_id" align="left" min-width="120" />
				<el-table-column label="商户姓名" prop="merchant_name" align="left" min-width="100" />
				<el-table-column label="商户身份证号" prop="merchant_id_card" align="left" min-width="200" />
				<el-table-column label="费用类型" prop="fee_type" align="left" min-width="80" />
				<el-table-column label="费用所属时段" prop="fee_period" align="left" min-width="200" />
				<el-table-column label="金额" prop="amount" align="left" min-width="140" />
				<el-table-column label="备注" prop="remark" align="left" min-width="160" />
				<el-table-column label="缴费状态" prop="payment_status" align="left" min-width="100" />
				<el-table-column label="账单编号" prop="billing_no" align="left" min-width="200" />
				<el-table-column label="支付时间" prop="payment_time" align="left" min-width="180" />
				<el-table-column label="支付用户ID" prop="member_id" align="left" min-width="180" />
				<el-table-column label="内部订单号" prop="order_no" align="left" min-width="180" />
				<el-table-column label="富滇订单号" prop="fd_order_no" align="left" min-width="210" />
				<el-table-column label="退款备注" prop="refund_note" align="left" min-width="140" />
				<el-table-column label="退款时间" prop="refund_at" align="left" min-width="200" />
				<el-table-column label="费用所属年月" prop="dates" align="left" min-width="180" />
				<el-table-column label="创建时间" prop="created_at" align="left" min-width="180" />

				<el-table-column label="操作" width="400" class-name="small-padding fixed-width" fixed="right">
					<template slot-scope="{ row }">
						<el-button type="primary" @click="editDataFn(row)" size="small">
							编辑
						</el-button>
						<el-button type="primary" @click="lookCountFn(row.id)" size="small">
							账单查询
						</el-button>
						<el-button type="danger" @click="deleteDataFn(row.id)" size="small">
							删除
						</el-button>
						<el-button v-if="
			    row.payment_status == '已缴费' || row.payment_status == '已退款'
			  " type="primary" @click="lookImgFn(row)" size="small">
							查看凭证
						</el-button>
						<el-button v-if="row.payment_status == '已缴费'" @click="refundFn(row)" type="danger" size="small">
							退款
						</el-button>

					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- 分页 -->
		<el-pagination @size-change="handleSizeChangeFn" @current-change="handleCurrentChangeFn"
			:current-page="queryData.curpage" :page-sizes="[10, 20, 30, 40]" :page-size="queryData.page"
			layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>
		<!-- 新增 编辑 -->
		<el-dialog :title="title" :visible.sync="addShow" width="50%" @closed="closeDialogFn">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="200px">
				<el-form-item label="商铺编号" prop="shop_id">
					<el-input v-model="ruleForm.shop_id" clearable placeholder="请输入商铺编号"></el-input>
				</el-form-item>
				<el-form-item label="商户姓名" prop="merchant_name">
					<el-input v-model="ruleForm.merchant_name" clearable placeholder="请输入商户姓名"></el-input>
				</el-form-item>
				<el-form-item label="商户身份证号" prop="merchant_id_card">
					<el-input v-model="ruleForm.merchant_id_card" clearable placeholder="请输入商户身份证号"></el-input>
				</el-form-item>
				<el-form-item label="费用类型" prop="fee_type">
					<el-select v-model="ruleForm.fee_type" clearable placeholder="请选择费用类型" style="width: 100%">
						<el-option v-for="item in feeOptions" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="费用所属时段" prop="fee_period">
					<el-input v-model="ruleForm.fee_period" placeholder="请输入费用所属时段" clearable></el-input>
				</el-form-item>
				<el-form-item label="金额" prop="amount">
					<el-input v-model="ruleForm.amount" placeholder="请输入金额" clearable></el-input>
				</el-form-item>
				<el-form-item label="缴费状态" prop="payment_status">
					<el-select v-model="ruleForm.payment_status" clearable placeholder="请选择缴费状态" style="width: 100%"
						@change='choosePayFn'>
						<el-option v-for="item in paymentOptions" :key="item.value" :label="item.label"
							:value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<!-- 已缴费填写的内容 -->
				<template v-if='payShow'>
					<el-form-item label="支付时间" prop="payment_time">
						<el-date-picker style="width: 100%;" v-model="ruleForm.payment_time" type="datetime"
							format='yyyy-MM-dd HH:mm:ss' placeholder="选择日期时间" value-format='yyyy-MM-dd HH:mm:ss'>
						</el-date-picker>
					</el-form-item>
					<el-form-item label="交易流水号" prop="fd_order_no">
						<el-input v-model="ruleForm.fd_order_no" placeholder="请输入" clearable />
					</el-form-item>
				</template>
				<el-form-item label="备注" prop=" remark">
					<el-input type="textarea" :rows="4" placeholder="请输入备注" v-model="ruleForm.remark">
					</el-input>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addShow = false">取消</el-button>
				<el-button type="primary" @click="saveInfoFn('ruleForm')" v-if="num == 0">
					确定
				</el-button>
				<el-button type="primary" @click="eidtInfoFn('ruleForm')" v-else-if="num == 1">
					提交
				</el-button>
			</span>
		</el-dialog>

		<!-- 查看凭证 -->
		<el-dialog title="查看凭证" :visible.sync="imgShow" width="410px">
			<canvas ref="certificateCanvas" class="voucher_canvas" id="save-picture" :disable-scroll="true"></canvas>
			<span slot="footer" class="dialog-footer">
				<el-button @click="imgShow = false">取 消</el-button>
				<el-button type="primary" @click="downImageFn()">下载凭证</el-button>
			</span>
		</el-dialog>

		<!-- 退款 -->
		<el-dialog title="退款" :visible.sync="refundShow" width="30%">
			<!--   <div>
       <div class="bank">
          <div class="blackBank">商铺编号:</div>
          <div class="left">{{ ruleForm.shop_id }}</div>
        </div>
        <div class="bank bank-top">
          <div class="blackBank">商户姓名:</div>
          <div class="left">{{ ruleForm.merchant_name }}</div>
        </div>
        <div class="bank bank-top">
          <div class="blackBank">商户身份证:</div>
          <div class="left">{{ ruleForm.merchant_id_card }}</div>
        </div>
        <div class="bank bank-top">
          <div class="blackBank">费用类型:</div>
          <div class="left">{{ ruleForm.fee_type }}</div>
        </div>
        <div class="bank bank-top">
          <div class="blackBank">金额:</div>
          <div class="left">{{ ruleForm.amount }}</div>
        </div>
        <div class="bank bank-top">
          <div class="blackBank">费用所属时间段:</div>
          <div class="left">{{ ruleForm.fee_period }}</div>
        </div>
        <div class="bank bank-top">
          <div class="blackBank">缴费状态:</div>
          <div class="left">{{ ruleForm.payment_status }}</div>
        </div>
        <div class="bank bank-top">
          <div class="blackBank">备注:</div>
          <div class="left">{{ ruleForm.remark }}</div>
        </div>
      </div> -->
			<div class="bank-top">
				<el-form :model="refundForm" :rules="refundRules" ref="refundRuleForm" label-width="100px">
					<el-form-item label="退款原因" prop="refund_note">
						<el-input type="textarea" :rows="3" v-model="refundForm.refund_note"></el-input>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="refundShow = false">取 消</el-button>
				<el-button type="primary" @click="surerefundFn('refundRuleForm')">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 导入 -->
		<el-dialog title="导入数据" :visible.sync="importDataShow" width="30%">
			<el-form :model="importFormData" :rules="importRules" ref='importForm' label-width="100px">
				<el-form-item label="选择时间" prop="dates">
					<el-date-picker style="width: 300px;" v-model="importFormData.dates" type="month" format="yyyy-MM"
						value-format="yyyy-MM" placeholder="选择月">
					</el-date-picker>
				</el-form-item>
				<el-form-item label="账单数据">
					<el-upload action="#" :file-list="XLSXFileList" :auto-upload="false" :on-change="handleChangeFn"
						:before-upload="handleBeforeUploadFn" :limit="1" accept=".xlsx,.xls">
						<el-button type='success' style="width: 300px;">导入账单数据</el-button>
					</el-upload>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="importDataShow = false">取 消</el-button>
				<el-button type="primary" @click="saveImportDataFn('importForm')">确 定</el-button>
			</span>
		</el-dialog>

		<!-- 错误的 数据显示-->
		<el-dialog title="错误的导入数据提示" :visible.sync="errorShow" width="40%">
			<div class="errorInfo">
				<div v-for="(item,index) in errorDataList" :key='index'>
					<div style="margin-top: 20px;">
						<div class='bank-top'>导入的内容: {{item.id_card}}</div>
						<div class='bank-top'>错误信息: {{item.reason}}</div>
						<div class='bank-top'>错误信息的行数位置: 在{{item.row}}行</div>
					</div>
				</div>
			</div>
			<span slot="footer">
				<div class="dialog_footer">
					<el-button @click="errorShow = false">关闭</el-button>
				</div>
			</span>
		</el-dialog>

		<!-- 账单数据查询 -->
		<el-dialog title="账单查询" :visible.sync="countShow" width="50%">
			<div class="errorInfo">
				<el-table :data="countList" style="width: 100%">
					<el-table-column prop="member_id" label="ID" width="80" />
					<el-table-column prop="amount" label="支付金额" min-width="120" />
					<el-table-column prop="fd_order_no" label="富滇银行支付单号" min-width="180" />
					<el-table-column prop="payment_status" label="缴费状态" min-width="120" />
					<el-table-column prop="payment_time" label="支付时间" min-width="160" />
				</el-table>
			</div>
			<span slot="footer">
				<div class="dialog_footer">
					<el-button @click="countShow = false">关闭</el-button>
				</div>
			</span>
		</el-dialog>

		<el-dialog title="查看凭证" :visible.sync="moreimgShow" width="460px" @closed='closeMoreFn'>
			<div style="height: 70vh;overflow-y:scroll;">
				<div v-for="(canvasData, index) in moreSelectionList" :key="index">
					<canvas :id="`canvas-${index}`" :width="canvasData.width" :height="canvasData.height"></canvas>
				</div>
				<el-button v-if='downShow' type="success" style="position: fixed;bottom: 40px;left: 50%;transform: translate(-50%,-50%);"
					@click='downSomething()'>下载凭证</el-button>

			</div>
		</el-dialog>

	</div>
</template>
<script>
	import {
		nextTick
	} from "vue";
	import {
		exportDataToXlsxFile
	} from "@/utils/exportTableData";
	import {
		Loading
	} from 'element-ui';
	export default {
		data() {
			const validateIdCard = (rule, value, callback) => {
				const reg = /^\d{17}[0-9Xx]$/i;

				if (reg.test(value) === false) {
					callback(new Error("请输入正确的身份证号码"));
				} else {
					callback();
				}
			};
			return {
				dateValue:'',
				//统计的数据
				totalAmountInfo: {},
				// 数据列表
				listLoading: true,
				XLSXFileList: [], //导入电子表格数据
				apiPath: "member.Billing",
				queryData: {
					page: 10,
					curpage: 1,
					fee_type: "", //'电费','水费','保证金','押金','商管费','租金' 缴费类型
					shop_id: "", //商铺编号
					merchant_name: "", //商户姓名
					merchant_id_card: '', //商户身份证
					dates: '',
					payment_status: '', //缴费状态
					order_no: '', //内部订单号   
					fd_order_no: '', // 富滇订单号 
					billing_no: '' ,//账单编号 
					pay_start_date:'',//支付开始时间
					pay_end_date:'' //支付结束时间

				},
				tabList: [],
				total: 0,
				feeOptions: [{
						value: "电费",
						label: "电费",
					},
					{
						value: "水费",
						label: "水费",
					},
					{
						value: "保证金",
						label: "保证金",
					},
					{
						value: "押金",
						label: "押金",
					},
					{
						value: "商管费",
						label: "商管费",
					},
					{
						value: "租金",
						label: "租金",
					},
					{
						value: "管理费",
						label: "管理费",
					}
				],
				addShow: false,
				title: "新增",
				ruleForm: {
					shop_id: "", //商铺编号
					merchant_name: "", //商户姓名
					merchant_id_card: "", //商户身份证
					fee_type: "", //费用类型
					fee_period: "", //费用所属时间段
					amount: "", //金额
					payment_status: "", //缴费状态
					remark: "", //备注
					payment_time: '', // 支付时间 
					fd_order_no: '' //  交易流水号
				},
				rules: {
					//商铺编号
					shop_id: [{
						required: true,
						message: "请输入商铺编号",
						trigger: "blur",
					}, ],
					//商户姓名
					merchant_name: [{
						required: true,
						message: "请输入商户姓名",
						trigger: "blur",
					}, ],
					//商户身份证
					merchant_id_card: [{
							required: true,
							message: "请输入商户身份证号",
							trigger: "blur",
						},
						// {
						// 	validator: validateIdCard,
						// 	trigger: "blur",
						// }
					],
					//费用类型
					fee_type: [{
						required: true,
						message: "请选择费用类型",
						trigger: "change",
					}, ],
					//费用所属时间段
					fee_period: [{
						required: true,
						message: "请输入费用所属时间段",
						trigger: "blur",
					}, ],
					//金额
					amount: [{
						required: true,
						message: "请输入金额",
						trigger: "blur",
					}, ],
					//缴费状态
					payment_status: [{
						required: true,
						message: "请选择缴费状态",
						trigger: "change",
					}, ],
					//支付时间
					payment_time: [{
						required: true,
						message: '请选择日期',
						trigger: 'change'
					}],
					//交易流水号
					fd_order_no: [{
						required: true,
						message: '请输入',
						trigger: 'blur'
					}]

				},
				//缴费状态
				paymentOptions: [{
						value: "已缴费",
						label: "已缴费",
					},
					{
						value: "未缴费",
						label: "未缴费",
					},
					{
						value: "已退款",
						label: "已退款",
					},
				],
				num: 0,
				id: "",
				imgShow: false, //是否查看凭证
				orderInfo: {}, //用户凭证信息
				canvas: null, // 画布对象
				sealImg: "", //凭证的印章
				refundShow: false, //退款
				refundForm: { //退款备注
					refund_note: "",
				},
				refundRules: { //退款表单验证
					refund_note: [{
						required: true,
						message: "请输入",
						trigger: "blur",
					}, ],
				},
				payShow: false, //是否显示缴费填写的资料
				importDataShow: false, //导入数据
				importFormData: { //导入数据
					dates: '', //导入的时间
					file: ''
				},
				importRules: {
					dates: [{
						required: true,
						message: '请选择日期',
						trigger: 'change'
					}]
				},
				tableH: '', //表格的高度
				errorDataList: [], //错误的数据格式
				errorShow: false, //显示错误的导入数据信息
				countList: [], //账单数据
				countShow: false,
				moreSelectionList: [], //批量导出凭证
				moreimgShow: false,
				downShow:false

			}
		},
		created() {
			//获取账单列表
			this.getAllBill();
		},
		methods: {
			//选择日期
			chooseTimeFn(time){
				if(time){ 
					this.queryData.pay_start_date = time[0];
					this.queryData.pay_end_date = time[1];
					//console.log(this.queryData.pay_end_date)
				}
				
			},
			closeMoreFn() {
				this.moreimgShow = false;
				this.moreSelectionList = []; //批量导出凭证				
				this.$refs.elTable.clearSelection();
			},
			//生成凭证的公共方法
			generateImg(canvasData, index){
			 this.canvas = document.getElementById(`canvas-${index}`);
			 canvasData.context = this.canvas.getContext('2d');
			 // 可以在这里初始化画布，例如绘制一些基本图形或背景等
			 //this.drawSomething(canvasData.context, index,canvasData);
			 //获取签章接口
			 let _this = this;
			 //let fee = canvasData.fee_type;
			 _this.$api.getSealApi({
			 	fee_type: canvasData.fee_type
			 }, this.apiPath).then((res) => {
			 	_this.sealImg = res.seal;
			 	_this.$nextTick(() => {
			 		if (res.seal) {
			 			let img = new Image();
			 			img.src = res.seal; //引入图片的路径						
			 			img.setAttribute("crossOrigin", 'Anonymous');
			 			img.onload = function() {
			 				//ctx.drawImage(图片对象, x位置, y位置, 宽度, 高度)
			 				canvasData.context.drawImage(img, 255, 335, 104, 80);
			 
			 			};
			 			canvasData.context.fillStyle = "#fff"; //设置或获取用于填充图形的颜色。
			 			canvasData.context.fillRect(0, 0, canvasData.width, canvasData
			 				.height); //用于绘制一个填充矩形
			 			canvasData.context.font = "bold 22px sans-serif"; //对字体进行设置
			 			canvasData.context.fillStyle = "#000";
			 			canvasData.context.textAlign = "center"; //文本对齐方式
			 			canvasData.context.fillText("仕林街缴费凭证", 185, 50); //描绘文本
			 			canvasData.context.font = "20px  sans-serif";
			 			canvasData.context.fillStyle = "red";
			 			canvasData.context.fillText("￥ " + canvasData.amount, 185,
			 				90); //描绘文本
			 			canvasData.context.font = "14px  sans-serif";
			 			canvasData.context.fillStyle = "#999";
			 			canvasData.context.fillText("缴费类型", 90, 120); //描绘文本
			 			canvasData.context.fillText("缴费状态", 270, 120); //描绘文本
			 
			 			canvasData.context.fillStyle = "#000";
			 			canvasData.context.fillText(canvasData.fee_type, 90, 140); //描绘文本
			 			canvasData.context.fillText(canvasData.payment_status, 270,
			 				140); //描绘文本
			 
			 			canvasData.context.fillStyle = "#999";
			 			canvasData.context.textAlign = "left";
			 			canvasData.context.fillText("商铺编号：", 10, 180); //描绘文本
			 
			 			canvasData.context.fillStyle = "#000";
			 			canvasData.context.textAlign = "right";
			 			canvasData.context.fillText(canvasData.shop_id, 360, 180); //描绘文本
			 
			 			canvasData.context.fillStyle = "#999";
			 			canvasData.context.textAlign = "left";
			 			canvasData.context.fillText("商户姓名：", 10, 210); //描绘文本
			 
			 			canvasData.context.fillStyle = "#000";
			 			canvasData.context.textAlign = "right";
			 			canvasData.context.fillText(canvasData.merchant_name, 360,
			 				210); //描绘文本
			 			canvasData.context.fillStyle = "#999";
			 			canvasData.context.textAlign = "left";
			 			canvasData.context.fillText("商户身份证号：", 10, 240); //描绘文本
			 
			 			canvasData.context.fillStyle = "#000";
			 			canvasData.context.textAlign = "right";
			 			canvasData.context.fillText(canvasData.merchant_id_card, 360,
			 				240); //描绘文本
			 
			 			canvasData.context.fillStyle = "#999";
			 			canvasData.context.textAlign = "left";
			 			canvasData.context.fillText("收费单位：", 10, 270); //描绘文本
			 
			 			canvasData.context.fillStyle = "#000";
			 			canvasData.context.textAlign = "right";
			 			canvasData.context.fillText("仕林街夜市管理中心", 360, 270); //描绘文本
			 
			 			canvasData.context.fillStyle = "#999";
			 			canvasData.context.textAlign = "left";
			 			canvasData.context.fillText("费用所属时段：", 10, 300); //描绘文本
			 
			 			canvasData.context.fillStyle = "#000";
			 			canvasData.context.textAlign = "right";
			 			canvasData.context.fillText(canvasData.fee_period, 360,
			 				300); //描绘文本
			 			canvasData.context.fillStyle = "#BBB";
			 			canvasData.context.setLineDash([3, 2], 0);
			 			canvasData.context.moveTo(10, 330); // 将路径起点移动到 (10, 330)
			 			canvasData.context.lineTo(360, 330); //从当前点绘制到 (360, 330)
			 			canvasData.context.stroke(); //描边路径
			 			canvasData.context.fillStyle = "#999";
			 			canvasData.context.textAlign = "left";
			 			canvasData.context.fillText("交易时间：", 10, 370); //描绘文本
			 			if (canvasData.payment_time != null) {
			 				canvasData.context.fillStyle = "#000";
			 				canvasData.context.textAlign = "right";
			 				canvasData.context.fillText(canvasData.payment_time, 360,
			 					370); //描绘文本
			 			}
			 
			 
			 			canvasData.context.fillStyle = "#999";
			 			canvasData.context.textAlign = "left";
			 			canvasData.context.fillText("交易流水号：", 10, 400); //描绘文本
			 
			 			if (canvasData.order_no) {
			 				canvasData.context.fillStyle = "#000";
			 				canvasData.context.textAlign = "right";
			 				canvasData.context.fillText(canvasData.fd_order_no, 360,
			 					400); //描绘文本
			 			}
			 
			 			let titleHeight = 440;
			 			if (canvasData.payment_status === "已退款") {
			 				canvasData.context.fillStyle = "#999";
			 				canvasData.context.textAlign = "left";
			 				canvasData.context.fillText("退款时间：", 10, 430); //描绘文本
			 
			 				canvasData.context.fillStyle = "#000";
			 				canvasData.context.textAlign = "right";
			 				canvasData.context.fillText(canvasData.refund_at, 360,
			 					430); //描绘文本
			 
			 				canvasData.context.fillStyle = "#999";
			 				canvasData.context.textAlign = "left";
			 				canvasData.context.fillText("退款备注：", 10, 460); //描绘文本
			 
			 				canvasData.context.fillStyle = "#000";
			 				canvasData.context.textAlign = "right";
			 				canvasData.context.fillText(canvasData.refund_note, 360,
			 					460); //描绘文本
			 
			 				titleHeight = 490;
			 			}
			 			canvasData.context.fillStyle = "#4095E5";
			 			canvasData.context.textAlign = "center";
			 			canvasData.context.font = "12px sans-serif";
			 			canvasData.context.fillText("如需发票请本月内带此缴费凭证到本公司开具。", 185,
			 				titleHeight); //描绘文本
			 		}
			 
			 	});
			 
			 });	
			},
			//下载凭证
			downSomething() {
				this.moreSelectionList.forEach((canvasData, index) => {
					//生成凭证的代码
					this.generateImg(canvasData, index);
					//生成图片
					let name = "仕林街缴费凭证商户姓名:" + canvasData.merchant_name;
					// 将canvas转换为图片
					const image = this.canvas.toDataURL("image/png");
					// 可以将image变量发送到服务器端或者直接用JS生成a标签下载
					const downloadLink = document.createElement("a");
					downloadLink.href = image;
					downloadLink.download = name + ".png";
					downloadLink.click();

				});
			},
			//批量导出凭证 生成凭证
			exportMoreData() {
				if (this.moreSelectionList.length == 0) {
					this.$message.error('请选择已缴费的商户数据!');
					return
				}
				this.moreimgShow = true;
				this.$nextTick(() => {
					this.moreSelectionList.forEach((canvasData, index) => {
						this.generateImg(canvasData, index);
				 });		
				});
              setTimeout(()=>{
				   this.downShow = true;
			  },2000)
			},
			drawSomething(canvasData, canvas) {
				let name = "仕林街缴费凭证商户姓名:" + canvasData.merchant_name;
				// 将canvas转换为图片
				const image = canvas.toDataURL("image/png");
				// 可以将image变量发送到服务器端或者直接用JS生成a标签下载
				const downloadLink = document.createElement("a");
				downloadLink.href = image;
				downloadLink.download = name + ".png";
				downloadLink.click();
			},
			// 单张下载凭证图片
			downImageFn() {
				let name = "仕林街缴费凭证商户姓名" + this.orderInfo.merchant_name;
				// 将canvas转换为图片
				const image = this.canvas.toDataURL("image/png");
				// 可以将image变量发送到服务器端或者直接用JS生成a标签下载
				const downloadLink = document.createElement("a");
				downloadLink.href = image;
				downloadLink.download = name + ".png";
				downloadLink.click();
			},
			//查看凭证
			lookImgFn(row) {
				let _this = this;
				_this.orderInfo = row;
				let fee = row.fee_type;
				//获取签章接口
				_this.$api.getSealApi({
					fee_type: fee
				}, this.apiPath).then((res) => {
					_this.sealImg = res.seal;
					if (_this.sealImg) {
						_this.imgShow = true;
						_this.$nextTick(() => {
							_this.canvas = _this.$refs.certificateCanvas;
							let ctx = _this.canvas.getContext("2d");
							let img = new Image();
							img.src = _this.sealImg; //引入图片的路径

							// 这段代码是JavaScript中的一段，主要是用于设置HTML中的<img>元素的属性。setAttribute是一个用于设置元素属性的方法，这里设置的是"crossOrigin"属性，'Anonymous'是它的值。

							// "crossOrigin"属性是HTML5中引入的一个安全相关的属性，当你想要从不同的域通过canvas进行图片处理的时候，需要设置这个属性。

							// 这个属性可以有三个值：

							// anonymous：如果你想要进行跨域图片的读取，但是你不想发送任何个人信息，比如cookie，那么你可以使用这个值。

							// use-credentials：如果你想要进行跨域图片的读取，并且你想要发送个人信息，比如cookie，那么你可以使用这个值。

							// 空字符串：如果你不想进行跨域图片的读取，那么你可以不设置这个属性。

							// 这段代码的作用是告诉浏览器，我们打算在canvas中使用这个图片，并且我们有相应的权限去读取这个图片。

							// 这段代码的应用场景主要是在web开发中，当你需要在前端进行图片处理的时候，比如你想要把图片画到canvas上，或者你想要获取图片的像素数据。

							// 这段代码本身没有问题，但是如果你在设置"crossOrigin"属性的时候遇到了问题，那可能是因为你的图片服务器没有正确的CORS设置。如果你遇到了问题，你需要确保你的图片服务器支持跨域资源共享(CORS)，并且正确地设置了相应的HTTP头部。

							img.setAttribute("crossOrigin", 'Anonymous');
							img.onload = function() {
								//ctx.drawImage(图片对象, x位置, y位置, 宽度, 高度)
								ctx.drawImage(img, 255, 335, 104, 80);

							};

							_this.canvas.width = 370; //画布的宽度
							_this.canvas.height = 520; //画布的高度
							ctx.fillStyle = "#fff"; //设置或获取用于填充图形的颜色。
							ctx.fillRect(0, 0, _this.canvas.width, _this.canvas.height); //用于绘制一个填充矩形
							ctx.font = "bold 22px sans-serif"; //对字体进行设置
							ctx.fillStyle = "#000";
							ctx.textAlign = "center"; //文本对齐方式
							ctx.fillText("仕林街缴费凭证", 185, 50); //描绘文本
							ctx.font = "20px  sans-serif";
							ctx.fillStyle = "red";
							ctx.fillText("￥ " + _this.orderInfo.amount, 185, 90); //描绘文本
							ctx.font = "14px  sans-serif";
							ctx.fillStyle = "#999";
							ctx.fillText("缴费类型", 90, 120); //描绘文本
							ctx.fillText("缴费状态", 270, 120); //描绘文本

							ctx.fillStyle = "#000";
							ctx.fillText(_this.orderInfo.fee_type, 90, 140); //描绘文本
							ctx.fillText(_this.orderInfo.payment_status, 270, 140); //描绘文本

							ctx.fillStyle = "#999";
							ctx.textAlign = "left";
							ctx.fillText("商铺编号：", 10, 180); //描绘文本

							ctx.fillStyle = "#000";
							ctx.textAlign = "right";
							ctx.fillText(_this.orderInfo.shop_id, 360, 180); //描绘文本

							ctx.fillStyle = "#999";
							ctx.textAlign = "left";
							ctx.fillText("商户姓名：", 10, 210); //描绘文本

							ctx.fillStyle = "#000";
							ctx.textAlign = "right";
							ctx.fillText(_this.orderInfo.merchant_name, 360, 210); //描绘文本
							ctx.fillStyle = "#999";
							ctx.textAlign = "left";
							ctx.fillText("商户身份证号：", 10, 240); //描绘文本

							ctx.fillStyle = "#000";
							ctx.textAlign = "right";
							ctx.fillText(_this.orderInfo.merchant_id_card, 360, 240); //描绘文本

							ctx.fillStyle = "#999";
							ctx.textAlign = "left";
							ctx.fillText("收费单位：", 10, 270); //描绘文本

							ctx.fillStyle = "#000";
							ctx.textAlign = "right";
							ctx.fillText("仕林街夜市管理中心", 360, 270); //描绘文本

							ctx.fillStyle = "#999";
							ctx.textAlign = "left";
							ctx.fillText("费用所属时段：", 10, 300); //描绘文本

							ctx.fillStyle = "#000";
							ctx.textAlign = "right";
							ctx.fillText(_this.orderInfo.fee_period, 360, 300); //描绘文本
							ctx.fillStyle = "#BBB";
							ctx.setLineDash([3, 2], 0);
							ctx.moveTo(10, 330); // 将路径起点移动到 (10, 330)
							ctx.lineTo(360, 330); //从当前点绘制到 (360, 330)
							ctx.stroke(); //描边路径
							ctx.fillStyle = "#999";
							ctx.textAlign = "left";
							ctx.fillText("交易时间：", 10, 370); //描绘文本
							if (_this.orderInfo.payment_time != null) {
								ctx.fillStyle = "#000";
								ctx.textAlign = "right";
								ctx.fillText(_this.orderInfo.payment_time, 360, 370); //描绘文本
							}


							ctx.fillStyle = "#999";
							ctx.textAlign = "left";
							ctx.fillText("交易流水号：", 10, 400); //描绘文本

							if (_this.orderInfo.order_no) {
								ctx.fillStyle = "#000";
								ctx.textAlign = "right";
								ctx.fillText(_this.orderInfo.fd_order_no, 360, 400); //描绘文本
							}

							let titleHeight = 440;
							if (_this.orderInfo.payment_status === "已退款") {
								ctx.fillStyle = "#999";
								ctx.textAlign = "left";
								ctx.fillText("退款时间：", 10, 430); //描绘文本

								ctx.fillStyle = "#000";
								ctx.textAlign = "right";
								ctx.fillText(_this.orderInfo.refund_at, 360, 430); //描绘文本

								ctx.fillStyle = "#999";
								ctx.textAlign = "left";
								ctx.fillText("退款备注：", 10, 460); //描绘文本

								ctx.fillStyle = "#000";
								ctx.textAlign = "right";
								ctx.fillText(_this.orderInfo.refund_note, 360, 460); //描绘文本

								titleHeight = 490;
							}

							ctx.fillStyle = "#4095E5";
							ctx.textAlign = "center";
							ctx.font = "12px sans-serif";
							ctx.fillText("如需发票请本月内带此缴费凭证到本公司开具。", 185, titleHeight); //描绘文本
						});
					}
				});
			},
			handleSelectionChange(arr) {
				this.moreSelectionList = arr.map(item => {
					return {
						width: 370, //画布的宽度
						height: 520, //画布的高度
						context: null,
						...item
					}
				})
				//console.log(444, this.moreSelectionList)
			},
			//账单查询
			lookCountFn(id) {
				let apiPath = 'member.Billing/getStagesList'
				this.$api.getList({
					id: id
				}, apiPath).then((res) => {
					this.countList = res.list;
					this.countShow = true;
					//console.log(33,res)
				});
			},
			downLoadFn(url) {
				window.open(url, '_blank');
			},
			handleBeforeUploadFn(file) {
				this.XLSXFileList = [file];
				return false; // 返回 false 取消默认的上传行为
			},
			//导入账单数据
			handleChangeFn(file, fileList) {
				this.XLSXFileList = fileList;
				//console.log(file)
				this.importFormData.file = file.raw;
			},
			//导入账单数据 --确定
			saveImportDataFn(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$api.importData(this.importFormData, this.apiPath).then((res) => {
							//console.log(res)
							if (res.length == 0) {
								this.$message({
									message: "导入成功",
									type: "success",
								});
								this.queryData.curpage = 1;
								this.importDataShow = false;
								this.importFormData.dates = "";
								this.getAllBill();
							} else { //错误的数据格式 
								this.errorDataList = res;
								this.importDataShow = false;
								this.errorShow = true;
							}
						});
					} else {
						//console.log('error submit!!');
						return false;
					}
				});
			},
			//导入数据
			importDataFn() {
				this.$nextTick(() => {
					//清空表单验证的数据
					if (this.$refs.importForm) {
						this.$refs.importForm.resetFields();
					}
				});
				this.importFormData.dates = '';
				this.XLSXFileList = [];
				this.importDataShow = true;
			},
			//缴费状态
			choosePayFn(e) {
				let info = e;
				if (info == '已缴费') {
					this.payShow = true;
				} else {
					this.payShow = false;
				}

			},
			//退款
			refundFn(row) {
				this.ruleForm = {};
				this.ruleForm = row;
				this.id = row.id;
				this.refundShow = true;
			},
			//账单退费的提交
			surerefundFn(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						let data = {
							refund_note: this.refundForm.refund_note,
							id: this.id,
						};
						this.$api.refundMoney(data, this.apiPath).then((res) => {
							//console.log(res);
							this.refundShow = false;
							this.$message({
								message: "退款成功",
								type: "success",
							});
							//获取账单列表
							this.getAllBill();
						});
					} else {
						//console.log('error submit!!');
						return false;
					}
				});
			},

			//导出
			exportToExcel() {
				this.$confirm("是否将数据导出?", "提示", {
					confirmButtonText: "确定",
					cancelButtonText: "取消",
					type: "提示",
				}).then(() => {
					this.queryData.page = this.total;
					//console.log(this.total)
					//获取账单列表
					this.getAllBill();
					let loadingInstance = Loading.service({
						lock: true,
						text: '正在导出数据...'
					});
					let timerId = setTimeout(() => {
						let ignoreList = ['序号', "操作", "凭证操作", "退费操作"];
						let tableList = this.tabList;
						let tableName = "导出表格";
						let xlslName = "仕林夜市街商户收费账单数据";
						exportDataToXlsxFile(
							this.$refs.elTable,
							ignoreList,
							tableList,
							tableName,
							[],
							[],
							[],
							xlslName
						);
					}, 4000);

					// 4秒后清除定时器
					setTimeout(() => {
						clearTimeout(timerId);
						this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
							loadingInstance.close();
						});
						//重置数据
						this.resetDataFn();
					}, 5000);

				});
			},
			//删除
			deleteDataFn(id) {
				this.$confirm("此操作将永久删除该条数据, 是否继续?", "提示", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "提示",
					})
					.then(() => {
						this.$api
							.del({
									id_str: id,
								},
								this.apiPath
							)
							.then((response) => {
								//获取账单列表
								this.getAllBill();
								this.$message({
									message: "删除成功",
									type: "success",
								});
							});
					}).catch(() => {});
			},
			//编辑
			editDataFn(row) {
				this.$nextTick(() => {
					//清空表单验证的数据
					if (this.$refs.ruleForm) {
						this.$refs.ruleForm.resetFields();
					}
				});
				//console.log(row)
				this.ruleForm = {
					shop_id: "", //商铺编号
					merchant_name: "", //商户姓名
					merchant_id_card: "", //商户身份证
					fee_type: "", //费用类型
					fee_period: "", //费用所属时间段
					amount: "", //金额
					payment_status: "", //缴费状态
					remark: "", //备注
					payment_time: '', // 支付时间 
					fd_order_no: '' //  交易流水号
				}
				let rowCopy = {
					...row
				}
				for (let key in this.ruleForm) {
					if (rowCopy.hasOwnProperty(key)) {
						this.ruleForm[key] = rowCopy[key]
					}
				}
				if (rowCopy.payment_time == "0000-00-00 00:00:00") {
					this.ruleForm.payment_time = '';
				}
				//console.log(this.ruleForm)
				//this.ruleForm = rowCopy;
				if (rowCopy.payment_status == '已缴费') {
					this.payShow = true;
				}
				this.title = "编辑";
				this.id = rowCopy.id;
				this.num = 1;
				this.addShow = true;
			},
			//提交
			eidtInfoFn(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						let data = {
							...this.ruleForm,
							id: this.id,
						};
						// console.log(data)
						this.$api.edit(data, this.apiPath).then(() => {
							// 重新获取列表
							this.queryData.curpage = 1;
							this.tabList = [];
							this.getAllBill();
							this.addShow = false;
							this.$message({
								message: "修改成功",
								type: "success",
							});
						});
					} else {
						return false;
					}
				});
			},
			//关闭对话框
			closeDialogFn() {
				this.ruleForm = {};
				this.num = 0;
			},
			//添加
			addFn() {
				this.$nextTick(() => {
					//清空表单验证的数据
					if (this.$refs.ruleForm) {
						this.$refs.ruleForm.resetFields();
					}
				});
				this.payShow = false;
				this.ruleForm = {
					shop_id: "", //商铺编号
					merchant_name: "", //商户姓名
					merchant_id_card: "", //商户身份证
					fee_type: "", //费用类型
					fee_period: "", //费用所属时间段
					amount: "", //金额
					payment_status: "", //缴费状态
					remark: "", //备注
					payment_time: '', // 支付时间 
					fd_order_no: '' //  交易流水号
				}
				this.num = 0;
				this.addShow = true;
			},
			//保存
			saveInfoFn(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						this.$api.add(this.ruleForm, this.apiPath).then(() => {
							// 重新获取列表
							this.queryData.curpage = 1;
							this.tableList = [];
							this.getAllBill();
							this.addShow = false;
							this.$message({
								message: "添加成功",
								type: "success",
							});
						});
					} else {
						return false;
					}
				});
			},
			//重置
			resetDataFn() {
				this.queryData.fee_type = ""; //缴费类型
				this.queryData.shop_id = ""; //商铺编号
				this.queryData.merchant_name = ""; //商户姓名
				this.queryData.merchant_id_card = ""; //商户身份证
				this.queryData.dates = "";
				this.queryData.payment_status = ''; //缴费状态
				this.queryData.order_no = ''; //内部订单号   
				this.queryData.fd_order_no = ''; // 富滇订单号 
				this.queryData.billing_no = ''; //账单编号 
				this.queryData.curpage = 1;
				this.queryData.pay_start_date = '';
				this.queryData.pay_end_date = '';
				this.dateValue = '';
				this.queryData.page = 10
				this.getAllBill();
			},

			//获取账单列表
			getAllBill() {
				this.listLoading = true;
				this.$api.fetchList(this.queryData, this.apiPath).then((res) => {
					this.tabList = res.list;
					this.total = res.list_count;
					this.listLoading = false;
					this.totalAmountInfo = res.scData;
					//console.log(this.tabList)
				});
			},

			//切换条数
			handleSizeChangeFn(num) {
				this.queryData.page = num;
				this.getAllBill();
			},
			//切换页数
			handleCurrentChangeFn(page) {
				this.queryData.curpage = page;
				this.getAllBill();
			},
			//搜索
			searchFn() {
				this.queryData.curpage = 1
				this.queryData.page = 10
				this.getAllBill();
			},
		},
	};
</script>
<style lang="scss" scoped>
	.card {
		margin-bottom: 20px;
		margin-left: 20px;

		.card—font {
			display: flex;
			justify-content: space-around;
		}

		.total {
			text-align: center;

			div:first-child {
				color: #0055ff;
			}

			div:last-child {
				color: #999;
				margin-top: 10px;
			}

		}
	}

	.add-view {
		margin-left: 20px;
		margin-top: 10px;
	}

	.tableInfo {
		margin: 20px;
	}

	.left {
		margin-left: 20px;
	}

	.search {
		display: flex;

		.searchInfo {
			display: flex;
			align-items: center;
		}
	}

	.btn {
		display: flex;
	}

	.username {
		width: 240px;
	}

	.bank {
		display: flex;
	}

	.left {
		margin-left: 10px;
	}

	.bank-top {
		margin-top: 10px;
	}

	.blackBank {
		color: black;
	}

	.errorInfo {
		width: 100%;
		height: 50vh;
		overflow-y: auto;
	}

	.dialog_footer {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.href_view {
		width: fit-content;
		height: 60rpx;
		line-height: 60rpx;
		border: 1rpx solid #ff5500;
		border-radius: 10rpx;
	}
</style>